<template>
    <div>
        <!-- 搜索参数部分 -->
        <el-form :model="queryParams">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="订单编码">
                        <el-input v-model="queryParams.salesOrderCode" placehideholder="请输入订单编码" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="订单名称" v-model="queryParams.salesOrderName">
                        <el-input v-model="queryParams.salesOrderName" placehideholder="请输入订单名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                    <el-button :icon="Refresh" @click="resetField">重置</el-button>
                </el-col>
            </el-row>


        </el-form>
        <!-- 搜索参数部分 -->


        <!-- 按钮组件部分 -->
        <el-row class="button-group">
            <el-col :span="12">
                <div>
                    <el-button type="primary" plain :icon="Plus" @click="openAddOrder">新增</el-button>
                    <el-button type="success" plain :disabled="updateDisabled" :icon="EditPen"
                        @click="openUpdateOrder">修改</el-button>
                    <el-button type="danger" plain :disabled="deleteDisabled" :icon="Delete"
                        @click="handleDeleteOrder">删除</el-button>
                    <el-button type="warning" plain :icon="Download">导出</el-button>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="button-right">
                    <el-tooltip content="隐藏搜索" placement="top">
                        <el-button :icon="Search" circle />
                    </el-tooltip>
                    <el-tooltip content="刷新" placement="top">
                        <el-button :icon="Refresh" circle />
                    </el-tooltip>
                </div>
            </el-col>
        </el-row>
        <!-- 按钮组件部分 -->

        <!-- 表格组件 -->
        <el-row>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" :selectable="selectable" width="40" />
                <el-table-column align="center" label="订单编码" property="salesOrderCode" width="200" />
                <el-table-column align="center" property="salesOrderName" label="订单名称" />
                <el-table-column align="center" property="customer.customerCode" label="客户编码" />
                <el-table-column align="center" property="customer.customerName" label="客户名称" />
                <el-table-column align="center" property="salesOrderDate" label="订货日期" />
                <el-table-column align="center" property="deliveryDate" label="交货日期" />
                <el-table-column align="center" property="createTime" label="创建时间" />
                <el-table-column align="center" property="remark" label="备注" />
                <el-table-column align="center" label="操作" width="150">
                    <template #default="scope">
                        <el-button class="el-button-mini" link type="primary" size="small" :icon="EditPen"
                            @click="openUpdateOrder(index, scope.row)">修改</el-button>
                        <el-button class="el-button-mini" link type="primary" size="small" :icon="Delete"
                            @click="deleteRow(index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!-- 新增弹窗 -->

        <InsertOrder :visible="isAddOrder" @closeInsertDialog="closeInsert"></InsertOrder>
        <!-- 修改弹窗 -->
        <UpdateOrder :visible="isUpdateOrder" :order="updateData" @closeUpdateDialog="closeUpdate"></UpdateOrder>

    </div>
</template>

<script setup>

import { ref, toRefs, reactive, onMounted } from 'vue'
import { Plus, EditPen, Delete, Search, Refresh, Download } from '@element-plus/icons-vue'
import { findSalesOrders, deleteProduct, queryProduct } from "@/apis/index"
import InsertOrder from '@/components/SalesOrder/InsertOrder.vue'
import UpdateOrder from '@/components/SalesOrder/UpdateOrder.vue'

// 定义数据模型
const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        salesOrderCode: null,
        salesOrderName: null,
    }})

const tableData = ref([]) // 表格数据
const PageResult = ref({}) // 分页数据
const salesOrderIds = ref([]) // 选中行的id数组
const updateData = ref({
    salesOrderId: null,
    salesOrderCode: null,
    salesOrderName: null,
    salesOrderDate: null,
    deliveryDate: null,
    orderType: null,
    customerId: null,
    customerCode: null,
    remark: null,
    salesOrderItems: []
})
// 解构数据模型
const { queryParams, form } = toRefs(data);


// ==============定义状态区==============
const deleteDisabled = ref(true) // 控制删除按钮是否禁用
const updateDisabled = ref(true) // 控制修改按钮是否禁用
const isAddOrder = ref(false) // 控制是否新增订单弹窗
const isUpdateOrder = ref(false) // 控制是否修改订单弹窗
// ==============状态区==================




// ==============定义方法区=============
//打开新增弹窗
const openAddOrder = () => {
    isAddOrder.value = !isAddOrder.value
    // form.value = {}
}
//关闭新增弹窗
const closeInsert = () => {
    isAddOrder.value = false
    // form.value = {}
    handleSearch()
}
// 关闭修改弹窗
const closeUpdate = () => {
    isUpdateOrder.value = false
    handleSearch()
}


//打开修改弹窗
const openUpdateOrder = async (index, row) => {
    isUpdateOrder.value = !isUpdateOrder.value
    updateData.value =   await queryProduct(salesOrderIds.value[0] || row.salesOrderId)
    console.log(updateData.value)
}

// 批量删除订单
const handleDeleteOrder = async () => {
    await deleteProduct(salesOrderIds.value)
    handleSearch()
}

// 使用条件选中行数据
const selectable = (row) => {
    return true
}

/**
 * 处理选中行变化
 * @param val 选中行的数组
 */
const handleSelectionChange = (val) => {
    salesOrderIds.value = [] // 重置选中行的id数组
    deleteDisabled.value = !val.length
    updateDisabled.value = !(val.length === 1)
    // 过滤选中行的salesOrderId属性
    salesOrderIds.value = val.map(item => item.salesOrderId)
    // if (!updateDisabled.value) {
       
    // } 
}
// ==============方法区===============

//参数查询
const handleSearch = async () => {
    PageResult.value = await findSalesOrders(queryParams.value)
    tableData.value = PageResult.value.records
}

//重置查询条件
const resetField = () => {
    queryParams.value.salesOrderCode = null
    queryParams.value.salesOrderName = null
    handleSearch()
}

//删除单行数据
const deleteRow = (index, row) => {
    salesOrderIds.value = [] // 重置选中行的id数组
    salesOrderIds.value.push(row.salesOrderId);
    handleDeleteOrder() // 调用批量删除订单方法
}

onMounted(async () => {
    PageResult.value = await findSalesOrders(queryParams.value)
    tableData.value = PageResult.value.records
})
</script>

<style scoped>

</style>
